<template>
  <div>
    <van-nav-bar
      class="van_nav"
      title="搜素中心"
      left-arrow
      @click-left="$router.back()"
    />

    <div v-show="show">
      <van-search
        v-model.trim="value"
        show-action
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <p v-show="!value">历史记录</p>
      <ul>
        <li
          @click="clickSearch(item)"
          v-for="(item, index) in valueList"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      show: true,
      valueList: [],
    };
  },
  created() {
    this.valueList = JSON.parse(localStorage.getItem("userValueList"));
  },
  methods: {
    onSearch() {
      if (this.value) {
        this.show = false;
        this.valueList.push(this.value);
        localStorage.setItem("userValueList", JSON.stringify(this.valueList));
        this.$router.push("/search/xiangqin?back=" + this.value);
      }
    },
    clickSearch(v) {
      this.$router.push("/search/xiangqin?back=" + v);
    },
  },
};
</script>

<style scoped lang="less">
.van_navs {
  .van-nav-bar__left {
    left: 100px;
  }
}
li {
  font-size: 20px;
  margin-top: 10px;
}
</style>